<template>
  <div :class="cardClass">
    <div :class="headerClass">
      <slot name="header"></slot>
    </div>
    <div :class="contentClass">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { css } from '@emotion/css';

const props = defineProps({
  elevation: {
    type: Number,
    default: 1,
    validator: value => value >= 0 && value <= 5
  },
  accentColor: {
    type: String,
    default: 'var(--primary)'
  },
  hoverEffect: {
    type: Boolean,
    default: true
  }
});

const cardClass = computed(() => {
  return css`
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);

    ${props.hoverEffect && css`
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
      }
    `}

    ${props.elevation === 0 && 'box-shadow: none;'}
    ${props.elevation === 1 && 'box-shadow: 0 1px 3px rgba(0,0,0,0.12);'}
    ${props.elevation === 2 && 'box-shadow: 0 3px 6px rgba(0,0,0,0.16);'}
    ${props.elevation === 3 && 'box-shadow: 0 6px 12px rgba(0,0,0,0.2);'}
    ${props.elevation === 4 && 'box-shadow: 0 10px 20px rgba(0,0,0,0.22);'}
    ${props.elevation === 5 && 'box-shadow: 0 15px 30px rgba(0,0,0,0.24);'}
  `;
});

const headerClass = computed(() => {
  return css`
    padding: 16px 24px;
    background: ${props.accentColor};
    color: white;
    font-weight: 600;
    font-size: 1.1em;
  `;
});

const contentClass = computed(() => {
  return css`
    padding: 24px;
    color: #333;
    line-height: 1.6;

    @media (max-width: 768px) {
      padding: 16px;
    }
  `;
});
</script>
